import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input, InputNumber, Radio, Modal, Cascader, Row, Col, DatePicker , Select} from 'antd'
import moment from 'moment';
import Toggles from '../../components/Toggles';
const RangePicker = DatePicker.RangePicker;
const RadioGroup = Radio.Group;
const FormItem = Form.Item
const { TextArea } = Input;

const formItemLayout = {
  labelCol: {
    span: 10,
  },
  wrapperCol: {
    span: 14,
  },
  colon:false
}

const modal = ({
  item = {},
  onOk,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  },
  ...modalProps
}) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        key: item.key,
      }
      // data.address = data.address.join(' ')
      // data.backPaymentPeriod = data.backPaymentPeriod  && data.backPaymentPeriod[0],
      // data.billParty = data.billParty && data.billParty[0],
      // data.payerId = data.payerId && data.payerId[0],
      // data.reimbursementRatio = data.reimbursementRatio && data.reimbursementRatio[0]
      data.id=item.id
      data.detailId=item.detailId
      data.customerProperty && (data.customerProperty = data.customerProperty[0])
      data.customerType && (data.customerType = data.customerType[0])
      data.industryCategory && (data.industryCategory = data.industryCategory[0])
      data.isServing && (data.isServing = data.isServing[0])
      data.isBadRecord && (data.isBadRecord = data.isBadRecord[0])
      data.ceoSex && (data.ceoSex = data.ceoSex[0])
      data.operator='admin'
      onOk(data)
    })
  }
  //补0操作
  function getzf(num){
     if(parseInt(num) < 10){
         num = '0'+num;
     }
     return num;
   }
  function getMyDate(str){
              var oDate = new Date(str),
              oYear = oDate.getFullYear(),
              oMonth = oDate.getMonth()+1,
              oDay = oDate.getDate(),
              oHour = oDate.getHours(),
              oMin = oDate.getMinutes(),
              oSen = oDate.getSeconds(),
              oTime = oYear +'-'+ getzf(oMonth) +'-'+ getzf(oDay) +' '+ getzf(oHour) +':'+ getzf(oMin) +':'+getzf(oSen);//最后拼接时间
              return oTime;
          };
  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }
  return (
    <Modal
      {...modalOpts}
      style={{minWidth:'600px'}}
      width='60vw'
    >
      <div
        style={{height:'60vh',overflow:'auto'}}
      >
        <Form
          layout="horizontal"

        >
          <Toggles name='客户信息'>
            <Row>
              <Col span={8}>
                <FormItem {...formItemLayout} label='客户中文名称'>
                  {
                    getFieldDecorator('customerName', {
                      rules: [{
                         required: true , message:'不能为空 !',
                         },
                      ],
                      initialValue: item.customerName,

                   })
                       (
                        <Input size='large' />
                       )
                  }
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem {...formItemLayout} label='客户编号'>
                  {
                    getFieldDecorator('customerNum',{
                      initialValue: item.customerNum,
                    })
                      (
                        <Input size='large' />
                      )
                  }
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem {...formItemLayout} label='客户英文名字' >
                    {
                      getFieldDecorator('customerEname', {
                        initialValue: item.customerEname,
                      })
                        (
                          <Input size='large' />
                        )
                   }
                </FormItem>
              </Col>
              </Row>
              <Row>
              <Col span={8}>
                <FormItem {...formItemLayout} label='客户简称'>
                  {
                    getFieldDecorator('customerAbbreviation', {
                      initialValue: item.customerAbbreviation,
                    })
                      (
                        <Input size='large' />
                      )
                  }
                </FormItem>
              </Col>
            <Col span={8}>
              <FormItem {...formItemLayout} label='客户性质' >
                {
                  getFieldDecorator('customerProperty',{
                    rules: [
                       {
                       required: true , message:'不能为空 !',
                       },
                    ],
                      initialValue: item.customerProperty ? String(item.customerProperty): null ,
                  })(

                           <Select placeholder='请选择' size='large'>
                             <Select.Option value='1'>企业</Select.Option>
                             <Select.Option value='2'>代表处</Select.Option>
                             <Select.Option value='3'>无机构</Select.Option>
                           </Select>

                   )
                }
              </FormItem>

            </Col>
            <Col span={8}>
              <FormItem {...formItemLayout} label='客户类型'>
                {
                  getFieldDecorator('customerType', {
                    rules: [
                       {
                       required: true , message:'不能为空 !',
                       },
                    ],
                      initialValue:item.customerType ? String(item.customerType): null,
                 })
                   (
                      <Select placeholder='请选择' size='large'>
                          <Select.Option value='1'>国家</Select.Option>
                          <Select.Option value='2'>集体</Select.Option>
                          <Select.Option value='3'>民营</Select.Option>
                          <Select.Option value='4'>外资</Select.Option>
                          <Select.Option value='5'>侨资</Select.Option>
                          <Select.Option value='6'>合资</Select.Option>
                          <Select.Option value='7'>中资</Select.Option>
                          <Select.Option value='8'>其他</Select.Option>
                      </Select>

                   )
                }
              </FormItem>
            </Col>
            </Row>
            <Row>
              <Col span={8}>
                <FormItem {...formItemLayout} label='行业类别'>
                  {
                    getFieldDecorator('industryCategory', {

                        initialValue:item.industryCategory ? String(item.industryCategory):null,
                    })
                      (
                        <Select placeholder='请选择' size='large'>
                            <Select.Option value='1'>房地产/建筑/物业/装饰房屋中介</Select.Option>
                            <Select.Option value='2'>金融/保险/证券/投资</Select.Option>
                            <Select.Option value='3'>医疗医药</Select.Option>
                            <Select.Option value='4'>物流运输</Select.Option>
                            <Select.Option value='5'>工厂制造业</Select.Option>
                            <Select.Option value='6'>汽车自动化</Select.Option>
                            <Select.Option value='7'>化工与能源</Select.Option>
                            <Select.Option value='8'>百货/连锁</Select.Option>
                            <Select.Option value='9'>快销/耐销</Select.Option>
                            <Select.Option value='10'>广告/多媒体</Select.Option>
                            <Select.Option value='11'>服务/教育/培训</Select.Option>
                            <Select.Option value='12'>其他</Select.Option>
                        </Select>
                      )
                  }
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem {...formItemLayout} label='销售'>
                  {
                    getFieldDecorator('market', {
                      initialValue: item.market,
                    })
                      (
                        <Input size='large' />
                      )
                  }
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem {...formItemLayout} label='公司网址'>
                  {
                    getFieldDecorator('companyWebsite', {
                      initialValue: item.companyWebsite,
                    })
                      (
                        <Input size='large'/>
                      )
                  }
                </FormItem>
              </Col>
              </Row>
              <Row>
              <Col span={8}>
                <FormItem {...formItemLayout} label='注册地址'>
                  {
                    getFieldDecorator('registeredAddress', {
                      initialValue: item.registeredAddress,
                    })
                      (
                        <Input size='large' />
                      )
                  }
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem {...formItemLayout} label='英文注册地址'>
                  {
                    getFieldDecorator('registeredEaddress', {
                      initialValue: item.registeredEaddress,
                    })
                      (
                        <Input size='large' />
                      )
                  }
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem {...formItemLayout} label='法人代表'>
                  {
                    getFieldDecorator('legalRepresentative', {
                      initialValue: item.legalRepresentative,
                    })
                      (
                        <Input size='large' />
                      )
                  }
                </FormItem>
              </Col>
              </Row>
              <Row>
              <Col span={8}>
                <FormItem {...formItemLayout} label='联系部门'  >
                  {
                    getFieldDecorator('contactDepartment', {
                      initialValue: item.contactDepartment,
                    })
                      (
                        <Input size='large' />
                      )
                  }
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem {...formItemLayout} label='联系地址'>
                  {
                    getFieldDecorator('contactAaddress',{
                      initialValue: item.contactAaddress,
                    })
                      (
                        <Input size='large' />
                      )
                  }
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem {...formItemLayout} label='联系邮编'>
                  {
                    getFieldDecorator('contactZipCode', {
                      initialValue: item.contactZipCode,
                    })
                      (
                        <Input size='large' />
                      )
                  }
                </FormItem>
              </Col>
              </Row>
              <Row>
              <Col span={8}>
                <FormItem {...formItemLayout} label='联系电话1'>
                  {
                    getFieldDecorator('telephone', {
                      initialValue: item.telephone,
                    })
                      (
                        <Input size='large' />
                      )
                  }
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem {...formItemLayout} label='联系电话2'>
                  {
                    getFieldDecorator('telephoneOther', {
                      initialValue: item.telephoneOther,
                    })
                      (
                        <Input size='large' />
                      )
                  }
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem {...formItemLayout} label='传真'>
                  {
                    getFieldDecorator('fax', {
                      initialValue: item.fax,
                    })
                      (
                        <Input size='large' />
                      )
                  }
                </FormItem>
              </Col>
              </Row>
              <Row>
              <Col span={8}>
                <FormItem {...formItemLayout} label='EMAIL'>
                  {
                    getFieldDecorator('email', {
                      initialValue: item.email,
                    })
                      (
                        <Input size='large'/>
                      )
                  }
                </FormItem>
              </Col>


              <Col span={8}>
                <FormItem {...formItemLayout} label='分公司'>
                  {
                    getFieldDecorator('branchOfficeId_xx', {
                      initialValue: item.branchOfficeId,
                    })
                      (
                        <Input size='large' />
                      )
                  }
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem {...formItemLayout} label='备注'>
                  {
                    getFieldDecorator('remark', {
                      initialValue: item.remark,
                    })
                      (
                        <TextArea  rows={1} />
                      )
                  }
                </FormItem>
              </Col>
            </Row>

          </Toggles>

          <Toggles name='其他信息'>
            <Row>
              <Col span={8}>
                <FormItem {...formItemLayout} label='CEO姓名'>
                  {getFieldDecorator('ceoName', {
                    initialValue: item.ceoName
                   })
                      (
                        <Input size='large' />
                      )
                 }
               </FormItem>
             </Col>

             <Col span={8}>
               <FormItem {...formItemLayout} label='CEO英文名'>
                 {getFieldDecorator('ceoEname', {
                   initialValue: item.ceoEname
                  })
                     (
                       <Input size='large' />
                     )
                }
              </FormItem>
            </Col>

            <Col span={8}>
              <FormItem {...formItemLayout} label='CEO性别'>
                {getFieldDecorator('ceoSex', {
                  initialValue: item.ceoSex ? String(item.ceoSex) :null,
                 })
                    (
                        <Select placeholder='请选择' size='large'>
                          <Select.Option value='1'>男</Select.Option>
                          <Select.Option value='0'>女</Select.Option>
                        </Select>
                    )
                 }
               </FormItem>
             </Col>
             </Row>
             <Row>
             <Col span={8}>
               <FormItem {...formItemLayout} label='CEO生日'>
                 {getFieldDecorator('ceoBirth', {
                   initialValue:item.ceoBirth ? moment(getMyDate(item.ceoBirth), 'YYYY-MM-DD') : '',
                 })(<DatePicker size='large' placeholder='' style={{width:'100%'}}/>)
               }
               </FormItem>
             </Col>
             <Col span={8}>
               <FormItem {...formItemLayout} label='投资方'>
                 {getFieldDecorator('investor', {
                   initialValue: item.investor
                 })
                    (
                      <Input size='large' />
                    )
                 }
               </FormItem>
             </Col>
             <Col span={8}>
               <FormItem {...formItemLayout} label='成立日期'>
                 {getFieldDecorator('establishDate', {
                   initialValue:item.establishDate ? moment(getMyDate(item.establishDate), 'YYYY-MM-DD') : '',
                 })(<DatePicker size='large' placeholder='' style={{width:'100%'}}/>)
               }
              </FormItem>
            </Col>
            </Row>
            <Row>
            <Col span={8}>
              <FormItem {...formItemLayout} label='营业范围'>
                {getFieldDecorator('businessScope', {
                  initialValue: item.businessScope
                 })
                    (
                      <Input size='large' />
                    )
                 }
               </FormItem>
             </Col>

             <Col span={8}>
               <FormItem {...formItemLayout} label='客户情况简介'>
                 {getFieldDecorator('customerProfile', {
                   initialValue: item.customerProfile
                  })
                     (
                       <Input size='large' />
                     )
                 }
               </FormItem>
             </Col>
              <Col span={8}>
                <FormItem {...formItemLayout} label='经营开始日期'>
                  {getFieldDecorator('businessStartDate', {
                    initialValue:item.businessStartDate ? moment(getMyDate(item.businessStartDate), 'YYYY-MM-DD') : '',
                  })(<DatePicker size='large' placeholder='' style={{width:'100%'}}/>)
                }
               </FormItem>
             </Col>
             </Row>
             <Row>
             <Col span={8}>
               <FormItem {...formItemLayout} label='经营结束日期'>
                 {getFieldDecorator('businessEndDate', {
                   initialValue:item.businessEndDate ? moment(getMyDate(item.businessEndDate), 'YYYY-MM-DD') : '',
                 })(<DatePicker size='large' placeholder='' style={{width:'100%'}}/>)
               }
              </FormItem>
            </Col>

            <Col span={8}>
              <FormItem {...formItemLayout} label='代表处序号'>
                {getFieldDecorator('representOfficeCode', {
                  initialValue: item.representOfficeCode
                 })
                    (
                      <Input size='large' />
                    )
                 }
               </FormItem>
             </Col>

             <Col span={8}>
               <FormItem {...formItemLayout} label='代表处代表人数'>
                 {getFieldDecorator('representativeNum', {
                   initialValue: item.representativeNum
                  })
                     (
                       <InputNumber size='large' style={{width:'100%'}}/>
                     )
                 }
               </FormItem>
             </Col>
             </Row>
             <Row>
             <Col span={8}>
                <FormItem {...formItemLayout} label='是否有不良记录'>
                  {getFieldDecorator('isBadRecord', {
                    initialValue: item.isBadRecord ? String(item.isBadRecord): null,
                   })
                      (
                          <Select placeholder='请选择' size='large'>
                            <Select.Option value='1'>是</Select.Option>
                            <Select.Option value='0'>否</Select.Option>
                          </Select>
                      )
                 }
               </FormItem>
             </Col>

             <Col span={8}>
               <FormItem {...formItemLayout} label='组织机构代码'>
                 {getFieldDecorator('organizationCode', {
                   initialValue: item.organizationCode
                  })
                     (
                       <Input size='large' />
                     )
                }
              </FormItem>
            </Col>

            <Col span={8}>
              <FormItem {...formItemLayout} label='开户行（英文）'>
                {getFieldDecorator('depositBank', {
                  initialValue: item.depositBank
                 })
                    (
                      <Input size='large' />
                    )
                 }
               </FormItem>
             </Col>
            </Row>
          </Toggles>
        </Form>
      </div>
    </Modal>

  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default Form.create()(modal)
